<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color"
			mode="aspectFill"></image>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template slot="top">
				<uv-navbar bgColor="rgba(0,0,0,0)" leftIcon=" " :fixed="false" title="项目列表"></uv-navbar>
				<view class="search-box">
					<uv-search height="74rpx" :bgColor="'#ffffff'" placeholder="请输入项目名称或项目编号" :showAction="false" shape="round"
						@search="searchChange" :searchIconColor="'#c0c4cc'" :placeholder-color="'#c0c4cc'">
						<view slot="prefix" class="prefix-box">
							<uv-icon name="search"></uv-icon>
							<view class="type" @click="openPicker">{{type.name}} <uv-icon name="arrow-down" size="24rpx"></uv-icon>
							</view>
						</view>
					</uv-search>
				</view>

			</template>
			<view class="list-box">
				<view class="list-item" v-for="(item, index) in dataList" :key="index" @click="navToDetail(item)">
					<view class="list-item-title">{{ item.project_name || '待完善' }}</view>
					<view class="list-item-data">
						<view class="list-item-data-lable-box">

							<block>
								<!-- colors: ["#60cf23", "#e8a35a", "#bccf2d", "#4F0CCA", "#D88D95", "#8F279B", "#7D365D", "#1acfd6", "#0078A3",
															"#A71B1B", "#175ADC",], -->
								<uv-tags text="待启动" size="mini" bgColor="#175ADC33" color="#175ADC" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 10"></uv-tags>
								<uv-tags text="待勘场" size="mini" bgColor="#e8a35a33" color="#e8a35a" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 15"></uv-tags>
								<uv-tags text="待勘场出图" size="mini" bgColor="#bccf2d33" color="#bccf2d" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 18"></uv-tags>
								<uv-tags text="待方案设计" size="mini" bgColor="#4F0CCA33" color="#4F0CCA" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 20"></uv-tags>
								<uv-tags text="待报价" size="mini" bgColor="#D88D9533" color="#D88D95" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 25"></uv-tags>
								<uv-tags text="洽谈中" size="mini" bgColor="#8F279B33" color="#8F279B" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 30"></uv-tags>
								<uv-tags text="已签约" size="mini" bgColor="#7D365D33" color="#7D365D" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 40"></uv-tags>
								<uv-tags text="待进场" size="mini" bgColor="#2b821633" color="#2b8216" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 42"></uv-tags>
								<uv-tags text="施工中" size="mini" bgColor="#1acfd633" color="#1acfd6" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 45"></uv-tags>
								<uv-tags text="已完工" size="mini" bgColor="#0078A333" color="#0078A3" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 50"></uv-tags>
								<uv-tags text="待结算" size="mini" bgColor="#A71B1B33" color="#A71B1B" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 55"></uv-tags>
								<uv-tags text="项目完结" size="mini" bgColor="#60cf2333" color="#60cf23" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 60"></uv-tags>
								<uv-tags text="项目取消" size="mini" bgColor="#f4f4f5" color="#909399" borderColor="rgba(0,0,0,0)"
									v-if="item.display_status == 70"></uv-tags>
							</block>
							<uv-tags :text="item.brand_name" v-if="item.brand_name" size="mini" :bgColor="`${item.brand_colour}33`"
								:color="item.brand_colour" borderColor="rgba(0,0,0,0)"></uv-tags>

							<uv-tags text="无需勘场" size="mini" bgColor="#F4F4F5" color="#909399" borderColor="rgba(0,0,0,0)"
								v-if="item.survey_site == 1"></uv-tags>
							<uv-tags text="实地勘场" size="mini" bgColor="rgba(59,117,255,.15)" color="#3B75FF"
								borderColor="rgba(0,0,0,0)" v-if="item.survey_site == 2"></uv-tags>
							<uv-tags text="勘场出图" size="mini" bgColor="rgba(59,117,255,.15)" color="#3B75FF"
								borderColor="rgba(0,0,0,0)" v-if="item.survey_site == 3"></uv-tags>
						</view>
						<view class="list-item-data-item">
							<view class="label">项目编号</view>
							<view class="desc">{{ item.project_number || '暂无' }}</view>
						</view>
						<view class="list-item-data-item">
							<view class="label">项目地址</view>
							<view class="desc">{{ item.area + item.address }}</view>
						</view>
						<view class="list-item-data-item">
							<view class="label">创建时间</view>
							<view class="desc">{{ item.created_at }}</view>
						</view>
					</view>
				</view>
			</view>
			<image slot="empty" class="no-data" src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png"
				mode="widthFix"></image>
			<tabbar slot="bottom" ref="tabbar"></tabbar>
		</z-paging>
		<!-- 筛选 -->
		<uv-picker ref="picker" :columns="columns" keyName="name" @confirm="confirm"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				keyword: '',
				type: {
					id: 0,
					name: '全部',
				},
				dataList: [],

				columns: [
					[{
						id: 0,
						name: '全部',
					}, {
						id: 1,
						name: '进行中',
					}, {
						id: 2,
						name: '施工中',
					}, {
						id: 3,
						name: '待评价',
					}]
				]
			}
		},
		onShow() {
			this.$refs.tabbar.getUserInfo()

			let options = uni.getStorageSync('project_type');
			if (options) {
				console.log(options);
				// 使用后清除存储（避免重复获取）
				uni.removeStorageSync('project_type');
				switch (options.name) {
					case '进行中':
						this.type = {
							id: 1,
							name: '进行中'
						}
						break
					case '施工中':
						this.type = {
							id: 2,
							name: '施工中'
						}
						break
					case '待评价':
						this.type = {
							id: 3,
							name: '待评价'
						}
						break
				}
				this.$refs.paging.reload();
			}
		},
		onLoad() {
			uni.hideTabBar();

			setTimeout(() => {
				this.loading = false
			}, 300)
		},
		methods: {
			searchChange(e) {
				this.keyword = e
				this.$refs.paging.reload()
			},
			navToDetail(item) {
				uni.navigateTo({
					url: '/pages/project_detail/project_detail?sn=' + item.id
				});
			},
			queryList(page, num) {
				this.getProjectList({
					page,
					num,
					keyword: this.keyword,
					project_status: this.type.id
				})
			},
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				console.log(e, '筛选');
				this.type = e.value[0];
				this.$refs.paging.reload()
			},
			// -------------------------------
			getProjectList(obj) {
				this.$Api.khGetProjectList(obj).then(res => {
					console.log(res, '项目列表')
					if (res.code == 200) {
						this.$refs.paging.complete(res.data.list);
					} else {
						this.$refs.paging.complete([]);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>